<template>
  <div ref="dom" style="width: 100%;height: 320px;"></div>
</template>

<script>
  import * as echarts from 'echarts';
  import { on, off } from '@/libs/tools'
  export default {
    name: "StaffJobEchart",
    data() {
      return {
        dom: null
      }
    },
    methods: {
      resize () {
        this.dom.resize()
      },
      initCharts () {
        const hexToRgba = (hex, opacity) => {
          let rgbaColor = "";
          let reg = /^#[\da-f]{6}$/i;
          if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
              "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
          }
          return rgbaColor;
        }
        const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
        const xData = ['08:00', '09:00', '10:00', '11:00','12:00', '13:00', '14:00', '15:00', '16:00'];
        let option = {
          backgroundColor: '#fff',
          height: '245px',
          width: '480px',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              label: {
                show: true,
                backgroundColor: '#fff',
                color: '#556677',
                borderColor: 'rgba(0,0,0,0)',
                shadowColor: 'rgba(0,0,0,0)',
                shadowOffsetY: 0
              },
              lineStyle: {
                width: 0
              }
            },
            backgroundColor: '#fff',
            textStyle: {
              color: '#5c6c7c'
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
          },
          grid: {
            top: '15%'
          },
          xAxis: [{
            type: 'category',
            data: xData,
            axisLine: {
              lineStyle: {
                color: 'rgba(107,107,107,0.37)', //x轴颜色
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#999' //坐标轴字颜色
              },
              margin: 15
            },
            axisPointer: {
              label: {
                padding: [11, 5, 7],
                backgroundColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: '#fff' // 0% 处的颜色
                  }, {
                    offset: 0.9,
                    color: '#fff' // 0% 处的颜色
                  }, {
                    offset: 0.9,
                    color: '#33c0cd' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#33c0cd' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            boundaryGap: false
          }],
          yAxis: [{
            type: 'value',
            name: '单位（人）',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(107,107,107,0.37)', //y轴颜色
              }
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            },
            splitLine: {
              show: false
            }
          }],
          series: [{
            name: '人数',
            type: 'line',
            data: [900, 1000, 1200, 1100, 850, 930, 700, 1120, 1080],
            symbolSize: 1,
            symbol: 'circle',
            smooth: true,
            yAxisIndex: 0,
            showSymbol: false,
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#00CA69'
              },
                {
                  offset: 1,
                  color: '#00CA69'
                }
              ]),
              shadowColor: 'rgba(158,135,255, 0.3)',
              shadowBlur: 10,
              shadowOffsetY: 20
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [{
                    offset: 0,
                    color: hexToRgba('#00CA69', 0.3)
                  },
                    {
                      offset: 1,
                      color: hexToRgba('#00CA69', 0.1)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba('#00CA69', 0.1),
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: colorList[0],
                borderColor: colorList[0]
              }
            }
          }]
        };
        this.$nextTick(() => {
          this.dom = echarts.init(this.$refs.dom);
          this.dom.setOption(option);
          on(window, 'resize', this.resize)
        })
      }
    },
    mounted() {
      this.initCharts()
    },
    beforeDestroy () {
      off(window, 'resize', this.resize)
    }
  }
</script>

<style scoped>

</style>
